<template>
	<view style="background-color: #fbfbfb;">
		<z-paging ref="paging"
				:fixed="false"
				:auto="false" 
				:auto-clean-list-when-reload="false"
				v-model="enrolls" 
				@query="queryList"
				:paging-style="{  
					height: $device.measure.windowHeight -  50 + 'px'
					
				}" 
			>
		
				<view style="display: flex;justify-content: center;background-color: #fff;">
					<u-tabs :list="tabs"
						:activeStyle="{
							 fontSize: '18px',
							 padding: '0 10px',
							 fontWeight: '600'
						}"
						:itemStyle="{
							height: '45px'
						}"
						:lineHeight="3"
						@click="(item)=>onTabClick(item,item.index)">
					</u-tabs>
				</view>
				
		<!-- 		<view  style="width:100%;display: flex;justify-content: space-between;align-items:center;background-color: #eee;">
					<view v-for="(item,index) in tabs" @click="onTabClick(item,index)" style="flex: 1 0 0;padding:10px;overflow: hidden;border-radius: 15px 15px 0 0;"
						:style="{
							backgroundColor:tabIndex==index? 'white':'#eee',
							color:tabIndex==index?'red' :'#666'
						}"
					>
						<view style="display: flex;align-items: center;justify-content: center;">
							{{item.label}}
						</view>
					</view> 
				</view> -->
					
				<template #empty>
					<view style="background-color: white;padding-top: 100px;width: 100%;height: 705px;">
						<u-empty
						        mode="list"
						        :icon="absUrl('/static/empty-list.jpg')"
								width="160"
								height="160"
						>
						</u-empty>
						
						<view style="margin: 50px;">
							<u-button> 马上去报名 </u-button>
						</view>
					</view>
				</template>
				
				<!-- 报名列表 -->
				<view @click="onView(enroll)" v-for="(enroll,index) in enrolls" style="box-shadow: 0px 0px 13px 0px #99999965;;background-color: #fff;border-radius: 10rpx; margin: 15px 10px;padding:5px">
					<!-- 班次时间 -->
					<view class="job-list" style="position: relative;;background-color: white;border-radius: 5px;margin:0 10rpx;">
						<view style="position: absolute; right: 65px;top:45px"> 
							<i class="iconfont icon-shenhejujue" style="font-size: 50px;"></i>
						</view>
						
						<view style="padding: 5px 5px;display: flex;justify-content: space-between;align-items: center;">
							<view style=";font-size: 16px;font-weight: bold;">{{enroll.expected_job.name}}</view>
							<view style="font-size: 32rpx;font-weight: bold;color: #ff6a00;">￥:{{enroll.expected_job.price.toFixed(2)}}</view>
						</view>
						 
						<view style="padding: 5px 5px;display: flex;justify-content: space-between;align-items: flex-start;">
							<view style="flex:1;font-size: 13px;">
								<view style="display: flex;flex-direction: column;">
									<view> {{$dayjs(enroll.project.start_date).format('MM月DD日')}} {{fixedTime(enroll.expected_job.start_time)}}-{{fixedTime(enroll.expected_job.end_time,false)}}  {{'周'+['日', '一', '二', '三', '四', '五', '六'][$dayjs(enroll.project.start_date).day()]}}</view>
									<view style="display: flex;align-items: center;justify-content: space-between;">
										<view style="flex:1;display: flex;align-items: center;padding: 20rpx 0;">
											<image style="margin-right: 10rpx;width: 50rpx;height: 50rpx;" src="http://www.apesk.net/cdn/static/img-back.png"></image>
											<view style="font-size: 28rpx;">
												{{enroll.project.title}}
											</view>
										</view>
									</view>
									<view style="flex: 1;">
										<span style="
										font-size: 24rpx; 
										color:#b6b6b6;"
										>广东掌聘人力资源有限公司</span>
										<span style="
											background-color: #fff6c7;
											border-radius: 100rpx;
											padding: 6rpx 20rpx;
											margin-left: 14rpx;
											text-align: center;
											color: #ff8725;
											font-size: 20rpx;
											">企业认证</span>
									</view>
								</view>
							</view>
							
							<view style="text-align:right;"> 
								<span style="flex:0 0 40%;font-size: 28rpx;">{{enroll.expected_job.price_type}}/{{enroll.expected_job.settle_type}}</span>
								<view style="text-align: right;padding: 20rpx 0;">
									3.2km
								</view>
								<view style="text-align: right;padding: 10rpx 0;color: #ff6a00;font-weight: bold;">
									预计: 120.00
								</view>
							</view>
							
						</view>

					</view>
					
<!-- 					<view style="padding: 10px 10px 5px;margin:5px 0;background-color: #fff2dc;">
						<view style="display: flex;align-items: center;font-size: 14px;">
						  <view style="margin-right: 5px;color: #777">下一步:</view>
						  <view style="font-size: 12px;color:white;padding:4px 8px;border-radius: 50px;background-color: limegreen;">
							{{state[enroll.state_step]}}
						  </view>
						</view>
					</view> -->
				</view>
			</z-paging>
	</view>
</template>

<script>
	import jobData from '@/utils/data/workData.js'
	import timeTextFormat from '@/utils/mixins/time-text-format.js'

	import tabbs from '@/pages/tabbs/tabbas.vue'
	export default {
		components:{tabbs},
		mixins:[jobData,timeTextFormat],
		data() {
			return {
				state:[
					'未报名',
					'加群确认',
					'签到打卡',
					'签退打卡',
					'等待验收',
					'等待发薪',
					'项目完结',
				],
				tabs:[
					{
						name:'最近',
						type:'recent',
					},
					{
						name:'历史',
						type: 'history'
					}
				],
				tabItem:null,
				tabIndex:-1,
				enrolls:[],
			}
		},
		computed: {
			name() {
				return this.data 
			}
		},
		mounted(){
			let that = this
			this.onTabClick(this.tabs[0],0,false) 
			
			setTimeout(async ()=>{
				
				console.log('FFFFFFFFFFFFFFFFFFFFFFFx')
				that.$refs.paging.reload()
			},500)
		},
		methods: {
			onTabClick(item,index,reload=true){
				console.log(index)
				console.log(item)
				if(this.tabIndex != index)
				{
					this.tabItem = item
					this.tabIndex = index
					
					if(reload)
						this.$refs.paging.reload()
				}
			},
			async queryList(){
				console.log('22FFFFFFFFFFFFFFFFFFFFFFFx')
				uni.showLoading({
					title: '正在加载'
				})
				 
				let res = await this.$http.get(`/user/job/enroll/list?type=${this.tabItem.type}`)
				
				uni.hideLoading()
				
				//that.enrolls = res.data
				console.log(res)
				
				this.$refs.paging.complete(res.data)
			},
			async onView(enroll)
			{
				// console.log(enroll)
				
				// this.pageParam.enroll = enroll
				
				// let res = await this.$http.get('/common/job/task',{
				// 	params:{
				// 		task_id:enroll.job_task_id
				// 	}
				// })
				
				// console.log(res.data)
				
				// this.pageParam.job_state.task = res.data
				
				uni.navigateTo({
					url:`/pages/job/user/job-state/job-state?task_id=${enroll.job_task_id}`
				})
			}
		}
	}
</script>

<style scoped>
	
	.job-list .job-item {
		border-bottom:solid 1rpx #eee;
	}
	
	.job-item:last-child {
		border-bottom: none;
	}
</style>
